<template>
	<view>
		<view class="wrap">
			<u-row gutter="12" v-for="item in internshipList">
				<u-col span="12">
					<view class="box bg-purple" @click="goToInternshipDetails(item.id)">
						<u-avatar class=""></u-avatar>
						<view class="center">
							<text class="internshipName">{{item.internshipName}}</text>
							<text class="internshipIntroduce"><b>简介:</b>{{item.internshipIntroduce}}</text>
						</view>

					</view>
				</u-col>
			</u-row>
			<!-- <u-row gutter="12">
				<u-col span="12">
					<view class="demo-layout bg-purple-light"></view>
				</u-col>
			</u-row>
			<u-row gutter="12">
				<u-col span="12">
					<view class="demo-layout bg-purple-dark"></view>
				</u-col>
			</u-row> -->
		</view>
		<!-- <u-index-list :scrollTop="scrollTop">
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item" />
				<view class="list-cell">
					列表1
				</view>
			</view>
		</u-index-list> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				internshipList: [],
				scrollTop: 0,
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U",
					"V", "W", "X", "Y", "Z"
				]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		created() {
			this.getInternshipList()
		},
		methods: {

			async getInternshipList() {
				let token = uni.getStorageSync('token')
				const res = await this.$myRequest({
					url: '/intern/internship-info/list/1/10',
					method: 'post',
					token: token
				})
				console.log(res.data)
				this.internshipList = res.data.data.internships
			},

			goToInternshipDetails(iid) {
				uni.navigateTo({
					url: `/pages/internship/internshipDetails?iid=${iid}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		// padding: 24rpx;
	}

	.u-row {
		margin: 20rpx 0;
	}

	.box {
		display: flex;
		padding-left: 20rpx;
		align-items: center;
		height: 180rpx;
		border-radius: 10rpx;

		.center {
			height: 90%;
			width: 60%;
			margin-top: 10%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			.internshipName {
				font-size: 45rpx;
			}
			.internshipIntroduce {
				font-size: 30rpx;
			}
		}
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
</style>
